import ArticleItem from '@/components/ArticleItem';
import { useAppSelector } from '@/store';
import { getArticlesByIdAction, updateArticlesByIdAction } from '@/store/action/article';
import { InfiniteScroll, PullToRefresh } from 'antd-mobile';
import { useDispatch } from 'react-redux';
import styles from './index.module.scss';
type Props = {
  channel_id: number;
  style?: React.CSSProperties;
};

export default function ArticleList({ channel_id, style }: Props) {
  const { articleData } = useAppSelector((state) => state.article);
  const dispatch = useDispatch();

  const { results = [], pre_timestamp } = articleData[channel_id] || {};
  const loadMore = async () => {
    await dispatch(updateArticlesByIdAction(channel_id, Number(pre_timestamp)));
  };

  const handleRefresh = async () => {
    await dispatch(getArticlesByIdAction(channel_id));
  };
  return (
    <div className={styles.root} style={{ ...style }}>
      <div className="channel-list">
        <PullToRefresh onRefresh={handleRefresh}>
          {results.map((item) => (
            <ArticleItem key={item.art_id} data={item} />
          ))}
        </PullToRefresh>
        {!!results.length && (
          <InfiniteScroll loadMore={loadMore} hasMore={pre_timestamp !== null} />
        )}
      </div>
    </div>
  );
}
